[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import NeuroShader from "@/components/neuro-shader" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/neuro-shader.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Copy, Settings, Check } from "lucide-react" // Vertex shader source (common for all shaders) const vertexShaderSource = ` attribute vec2 a_position; varying vec2 vUv; void main() { vUv = a_position; gl_Position = vec4(a_position * 2.0 - 1.0, 0, 1); } ` // Shader types type ShaderType = "neuro" | "waves" | "particles" | "geometric" | "noise" // Base parameters interface interface BaseShaderParams { timeScale: number } // Neuro shader parameters interface NeuroShaderParams extends BaseShaderParams { baseHueSpeed: number colorSaturation: number colorLightness: number complementaryOffset: number pulseSpeed: number pulseIntensity: number shapeComplexity: number shapeIntensity: number rotationSpeed: number } // Waves shader parameters interface WavesShaderParams extends BaseShaderParams { waveCount: number waveAmplitude: number waveSpeed: number colorGradient1: [number, number, number] colorGradient2: [number, number, number] distortion: number } // Particles shader parameters interface ParticlesShaderParams extends BaseShaderParams { particleCount: number particleSize: number particleSpeed: number particleColor: [number, number, number] glowIntensity: number turbulence: number } // Geometric shader parameters interface GeometricShaderParams extends BaseShaderParams { gridSize: number lineWidth: number rotationSpeed: number colorShift: number patternComplexity: number animationStyle: number } // Noise shader parameters interface NoiseShaderParams extends BaseShaderParams { noiseScale: number noiseOctaves: number noisePersistence: number colorScale: number colorOffset: number distortionAmount: number } // Union type for all shader parameters type ShaderParams = | { type: "neuro"; params: NeuroShaderParams } | { type: "waves"; params: WavesShaderParams } | { type: "particles"; params: ParticlesShaderParams } | { type: "geometric"; params: GeometricShaderParams } | { type: "noise"; params: NoiseShaderParams } // Default parameters for each shader type const defaultParams: Record = { neuro: { baseHueSpeed: 0.1, colorSaturation: 0.8, colorLightness: 0.5, complementaryOffset: 0.5, pulseSpeed: 0.5, pulseIntensity: 0.1, shapeComplexity: 15, shapeIntensity: 1.2, rotationSpeed: 1.0, timeScale: 0.0003, }, waves: { waveCount: 5, waveAmplitude: 0.5, waveSpeed: 0.2, colorGradient1: [0.1, 0.2, 0.3], colorGradient2: [0.7, 0.8, 0.9], distortion: 0.3, timeScale: 0.0005, }, particles: { particleCount: 100, particleSize: 0.02, particleSpeed: 0.3, particleColor: [0.7, 0.8, 0.9], glowIntensity: 0.5, turbulence: 0.3, timeScale: 0.001, }, geometric: { gridSize: 10, lineWidth: 0.05, rotationSpeed: 0.1, colorShift: 0.5, patternComplexity: 3, animationStyle: 1, timeScale: 0.0002, }, noise: { noiseScale: 3.0, noiseOctaves: 4, noisePersistence: 0.5, colorScale: 1.0, colorOffset: 0.0, distortionAmount: 0.3, timeScale: 0.0004, }, } // Neuro shader fragment source const getNeuroShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; uniform float u_scroll_progress; // Parameter uniforms uniform float u_base_hue_speed; uniform float u_color_saturation; uniform float u_color_lightness; uniform float u_complementary_offset; uniform float u_pulse_speed; uniform float u_pulse_intensity; uniform float u_shape_complexity; uniform float u_shape_intensity; uniform float u_rotation_speed; uniform float u_time_scale; // HSL to RGB conversion for more intuitive color control vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } vec2 rotate(vec2 v, float a) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } float neuro_shape(vec2 uv, float t, float p) { vec2 sine_acc = vec2(0.); vec2 res = vec2(0.); float scale = 8.; for (int j = 0; j < 30; j++) { if (float(j) >= u_shape_complexity) break; uv = rotate(uv, u_rotation_speed); sine_acc = rotate(sine_acc, u_rotation_speed); vec2 layer = uv * scale + float(j) + sine_acc - t; sine_acc += sin(layer) + 2.4 * p; res += (.5 + .5 * cos(layer)) / scale; scale *= (1.2); } return res.x + res.y; } void main() { vec2 uv = .5 * vUv; uv.x *= u_ratio; vec2 pointer = vUv - u_pointer_position; pointer.x *= u_ratio; float p = clamp(length(pointer), 0., 1.); p = .5 * pow(1. - p, 2.); float t = u_time_scale * u_time; vec3 color = vec3(0.); float noise = neuro_shape(uv, t, p); noise = u_shape_intensity * pow(noise, 3.); noise += pow(noise, 10.); noise = max(.0, noise - .5); noise *= (1. - length(vUv - .5)); // Create a very slow time factor for color changes float colorTime = 0.0001 * u_time; // Create multiple color regions based on position and time // Region 1: Base color that shifts over time vec3 color1 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed, 1.0), // Hue cycles through full spectrum u_color_saturation, // Saturation from parameter u_color_lightness // Lightness from parameter )); // Region 2: Complementary color (opposite on color wheel) vec3 color2 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset, 1.0), // Complementary hue u_color_saturation - 0.1, u_color_lightness )); // Region 3: Triadic color scheme (120 degrees apart) vec3 color3 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset/1.5, 1.0), // 120 degrees from base u_color_saturation + 0.1, u_color_lightness + 0.1 )); // Region 4: Another triadic color (120 degrees in other direction) vec3 color4 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset*1.3, 1.0), // 240 degrees from base u_color_saturation, u_color_lightness - 0.1 )); // Create spatial variation based on position and noise float dist = length(vUv - 0.5) * 2.0; float angle = atan(vUv.y - 0.5, vUv.x - 0.5) / (3.14159 * 2.0) + 0.5; // Mix colors based on position and time // This creates swirling patterns of complementary colors float mixFactor1 = sin(angle * 6.28 + colorTime * 0.2) * 0.5 + 0.5; float mixFactor2 = cos(dist * 3.14 + colorTime * 0.15) * 0.5 + 0.5; // Create complex color mixing vec3 finalColor = mix( mix(color1, color2, mixFactor1), mix(color3, color4, mixFactor2), sin(dist * 5.0 + colorTime * 0.3) * 0.5 + 0.5 ); // Apply noise to the color color = finalColor * noise; // Add pulsing effect for continuous animation float pulse = sin(colorTime * u_pulse_speed) * u_pulse_intensity + 0.9; gl_FragColor = vec4(color * pulse, noise); } ` // Waves shader fragment source const getWavesShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_wave_count; uniform float u_wave_amplitude; uniform float u_wave_speed; uniform vec3 u_color_gradient1; uniform vec3 u_color_gradient2; uniform float u_distortion; uniform float u_time_scale; // Simplex noise function vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create distortion based on noise float distortion = snoise(uv * 2.0 + time * 0.1) * u_distortion; // Create waves float waves = 0.0; for (int i = 0; i < 10; i++) { if (float(i) >= u_wave_count) break; float fi = float(i) / u_wave_count; float speed = u_wave_speed * (0.5 + fi * 0.5); float amplitude = u_wave_amplitude * (0.5 + fi * 0.5); // Offset each wave slightly vec2 p = uv + vec2(fi * 0.2, fi * 0.3); p += distortion; // Create wave pattern float wave = sin(p.x * 10.0 + time * speed) * cos(p.y * 10.0 + time * speed * 0.7) * amplitude; waves += wave; } // Normalize waves waves = 0.5 + 0.5 * waves / u_wave_count; // Create gradient based on position and waves vec3 color = mix(u_color_gradient1, u_color_gradient2, waves); // Add subtle variation based on position float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Particles shader fragment source const getParticlesShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_particle_count; uniform float u_particle_size; uniform float u_particle_speed; uniform vec3 u_particle_color; uniform float u_glow_intensity; uniform float u_turbulence; uniform float u_time_scale; // Hash function for pseudo-random numbers float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } // Simplex noise for turbulence vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Initialize color vec3 color = vec3(0.0); // Create particles for (int i = 0; i < 200; i++) { if (float(i) >= u_particle_count) break; // Create a unique ID for each particle float fi = float(i); vec2 seed = vec2(fi * 0.123, fi * 0.456); // Generate random position and movement float random1 = hash(seed); float random2 = hash(seed + 0.123); float random3 = hash(seed + 0.456); // Particle base position vec2 pos = vec2( random1, random2 ); // Add turbulence to movement vec2 turbulence = vec2( snoise(pos + time * 0.1) * u_turbulence, snoise(pos + vec2(100.0) + time * 0.1) * u_turbulence ); // Update position with time and turbulence pos += turbulence; pos.y += time * u_particle_speed * (0.5 + random3 * 0.5); // Wrap around screen pos = fract(pos); // Calculate distance to current pixel float dist = length(uv - pos); // Create particle with glow float particle = u_particle_size / dist; // Add to color with glow color += u_particle_color * particle * u_glow_intensity; } // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Geometric shader fragment source const getGeometricShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_grid_size; uniform float u_line_width; uniform float u_rotation_speed; uniform float u_color_shift; uniform float u_pattern_complexity; uniform float u_animation_style; uniform float u_time_scale; // HSL to RGB conversion vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } // Rotation matrix mat2 rotate2d(float angle) { return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); } float pattern(vec2 p, float time) { // Scale based on grid size p *= u_grid_size; // Apply rotation based on time and position float angle = time * u_rotation_speed; if (u_animation_style > 1.5) { // Different rotation for different areas angle += length(floor(p)) * 0.1; } p = rotate2d(angle) * p; // Get grid cell vec2 i = floor(p); vec2 f = fract(p); // Pattern based on complexity float pattern = 0.0; if (u_pattern_complexity < 1.5) { // Simple grid vec2 grid = abs(f * 2.0 - 1.0); pattern = max(grid.x, grid.y); } else if (u_pattern_complexity < 2.5) { // Checkerboard float checker = mod(i.x + i.y, 2.0); pattern = mix( abs(f.x * 2.0 - 1.0), abs(f.y * 2.0 - 1.0), checker ); } else if (u_pattern_complexity < 3.5) { // Circles pattern = length(f - 0.5); } else { // Complex pattern vec2 q = f; for (int j = 0; j < 3; j++) { q = abs(q) / dot(q, q) - 0.5; } pattern = length(q); } // Create lines with adjustable width pattern = smoothstep(u_line_width, u_line_width + 0.05, pattern); return pattern; } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create pattern float p = pattern(uv, time); // Create color based on position and time float hue = fract(uv.x + uv.y + time * 0.1 * u_color_shift); vec3 color = hsl2rgb(vec3(hue, 0.6, 0.5)); // Apply pattern to color color = mix(color, color * 0.2, p); // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Noise shader fragment source const getNoiseShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_noise_scale; uniform float u_noise_octaves; uniform float u_noise_persistence; uniform float u_color_scale; uniform float u_color_offset; uniform float u_distortion_amount; uniform float u_time_scale; // Simplex noise function vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } // Fractal Brownian Motion (FBM) noise float fbm(vec2 p, float time) { float value = 0.0; float amplitude = 1.0; float frequency = 1.0; // Add time-based movement p += time * 0.1; // Add octaves of noise for (int i = 0; i < 8; i++) { if (float(i) >= u_noise_octaves) break; value += amplitude * snoise(p * frequency); amplitude *= u_noise_persistence; frequency *= 2.0; } return value; } // HSL to RGB conversion vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create distortion vec2 distortion = vec2( fbm(uv + vec2(0.0, time * 0.1), time), fbm(uv + vec2(5.2, time * 0.1), time) ) * u_distortion_amount; // Apply distortion to coordinates vec2 p = uv + distortion; // Generate noise float noise = fbm(p * u_noise_scale, time); // Map noise to color float hue = fract(noise * u_color_scale + u_color_offset + time * 0.05); float sat = 0.6 + noise * 0.2; float light = 0.5 + noise * 0.2; vec3 color = hsl2rgb(vec3(hue, sat, light)); // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Get shader source based on type const getShaderSource = (type: ShaderType) => { switch (type) { case "neuro": return getNeuroShaderSource() case "waves": return getWavesShaderSource() case "particles": return getParticlesShaderSource() case "geometric": return getGeometricShaderSource() case "noise": return getNoiseShaderSource() default: return getNeuroShaderSource() } } export default function NeuroShader() { const canvasRef = useRef(null) const requestRef = useRef() const startTimeRef = useRef(Date.now()) const [pointer, setPointer] = useState({ x: 0.5, y: 0.5, tX: 0.5, tY: 0.5 }) const [scrollProgress, setScrollProgress] = useState(0) const glRef = useRef(null) const programRef = useRef(null) const [showControls, setShowControls] = useState(false) const [copySuccess, setCopySuccess] = useState(false) const [shaderType, setShaderType] = useState("neuro") // Add shader parameters state const [neuroParams, setNeuroParams] = useState(defaultParams.neuro) const [wavesParams, setWavesParams] = useState(defaultParams.waves) const [particlesParams, setParticlesParams] = useState(defaultParams.particles) const [geometricParams, setGeometricParams] = useState(defaultParams.geometric) const [noiseParams, setNoiseParams] = useState(defaultParams.noise) // Get current params based on shader type const getCurrentParams = () => { switch (shaderType) { case "neuro": return neuroParams case "waves": return wavesParams case "particles": return particlesParams case "geometric": return geometricParams case "noise": return noiseParams default: return neuroParams } } // Set current params based on shader type const setCurrentParams = (params: any) => { switch (shaderType) { case "neuro": setNeuroParams(params) break case "waves": setWavesParams(params) break case "particles": setParticlesParams(params) break case "geometric": setGeometricParams(params) break case "noise": setNoiseParams(params) break } } const uniformsRef = useRef<{ time: WebGLUniformLocation | null ratio: WebGLUniformLocation | null pointerPosition: WebGLUniformLocation | null scrollProgress: WebGLUniformLocation | null // Neuro shader uniforms baseHueSpeed: WebGLUniformLocation | null colorSaturation: WebGLUniformLocation | null colorLightness: WebGLUniformLocation | null complementaryOffset: WebGLUniformLocation | null pulseSpeed: WebGLUniformLocation | null pulseIntensity: WebGLUniformLocation | null shapeComplexity: WebGLUniformLocation | null shapeIntensity: WebGLUniformLocation | null rotationSpeed: WebGLUniformLocation | null // Waves shader uniforms waveCount: WebGLUniformLocation | null waveAmplitude: WebGLUniformLocation | null waveSpeed: WebGLUniformLocation | null colorGradient1: WebGLUniformLocation | null colorGradient2: WebGLUniformLocation | null distortion: WebGLUniformLocation | null // Particles shader uniforms particleCount: WebGLUniformLocation | null particleSize: WebGLUniformLocation | null particleSpeed: WebGLUniformLocation | null particleColor: WebGLUniformLocation | null glowIntensity: WebGLUniformLocation | null turbulence: WebGLUniformLocation | null // Geometric shader uniforms gridSize: WebGLUniformLocation | null lineWidth: WebGLUniformLocation | null geometricRotationSpeed: WebGLUniformLocation | null colorShift: WebGLUniformLocation | null patternComplexity: WebGLUniformLocation | null animationStyle: WebGLUniformLocation | null // Noise shader uniforms noiseScale: WebGLUniformLocation | null noiseOctaves: WebGLUniformLocation | null noisePersistence: WebGLUniformLocation | null colorScale: WebGLUniformLocation | null colorOffset: WebGLUniformLocation | null distortionAmount: WebGLUniformLocation | null // Common timeScale: WebGLUniformLocation | null }>({ time: null, ratio: null, pointerPosition: null, scrollProgress: null, // Neuro shader uniforms baseHueSpeed: null, colorSaturation: null, colorLightness: null, complementaryOffset: null, pulseSpeed: null, pulseIntensity: null, shapeComplexity: null, shapeIntensity: null, rotationSpeed: null, // Waves shader uniforms waveCount: null, waveAmplitude: null, waveSpeed: null, colorGradient1: null, colorGradient2: null, distortion: null, // Particles shader uniforms particleCount: null, particleSize: null, particleSpeed: null, particleColor: null, glowIntensity: null, turbulence: null, // Geometric shader uniforms gridSize: null, lineWidth: null, geometricRotationSpeed: null, colorShift: null, patternComplexity: null, animationStyle: null, // Noise shader uniforms noiseScale: null, noiseOctaves: null, noisePersistence: null, colorScale: null, colorOffset: null, distortionAmount: null, // Common timeScale: null, }) // Initialize WebGL and shaders useEffect(() => { initializeWebGL() }, [shaderType]) const initializeWebGL = () => { const canvas = canvasRef.current if (!canvas) return const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") if (!gl) { console.error("WebGL is not supported by your browser.") return } glRef.current = gl // Create shader program const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER) const fragmentShader = createShader(gl, getShaderSource(shaderType), gl.FRAGMENT_SHADER) const program = createProgram(gl, vertexShader, fragmentShader) programRef.current = program // Set up position buffer const positionBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) const positions = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW) // Set up attributes const positionAttributeLocation = gl.getAttribLocation(program, "a_position") gl.enableVertexAttribArray(positionAttributeLocation) gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0) // Get uniform locations based on shader type uniformsRef.current.time = gl.getUniformLocation(program, "u_time") uniformsRef.current.ratio = gl.getUniformLocation(program, "u_ratio") uniformsRef.current.pointerPosition = gl.getUniformLocation(program, "u_pointer_position") uniformsRef.current.scrollProgress = gl.getUniformLocation(program, "u_scroll_progress") uniformsRef.current.timeScale = gl.getUniformLocation(program, "u_time_scale") // Get shader-specific uniform locations if (shaderType === "neuro") { uniformsRef.current.baseHueSpeed = gl.getUniformLocation(program, "u_base_hue_speed") uniformsRef.current.colorSaturation = gl.getUniformLocation(program, "u_color_saturation") uniformsRef.current.colorLightness = gl.getUniformLocation(program, "u_color_lightness") uniformsRef.current.complementaryOffset = gl.getUniformLocation(program, "u_complementary_offset") uniformsRef.current.pulseSpeed = gl.getUniformLocation(program, "u_pulse_speed") uniformsRef.current.pulseIntensity = gl.getUniformLocation(program, "u_pulse_intensity") uniformsRef.current.shapeComplexity = gl.getUniformLocation(program, "u_shape_complexity") uniformsRef.current.shapeIntensity = gl.getUniformLocation(program, "u_shape_intensity") uniformsRef.current.rotationSpeed = gl.getUniformLocation(program, "u_rotation_speed") } else if (shaderType === "waves") { uniformsRef.current.waveCount = gl.getUniformLocation(program, "u_wave_count") uniformsRef.current.waveAmplitude = gl.getUniformLocation(program, "u_wave_amplitude") uniformsRef.current.waveSpeed = gl.getUniformLocation(program, "u_wave_speed") uniformsRef.current.colorGradient1 = gl.getUniformLocation(program, "u_color_gradient1") uniformsRef.current.colorGradient2 = gl.getUniformLocation(program, "u_color_gradient2") uniformsRef.current.distortion = gl.getUniformLocation(program, "u_distortion") } else if (shaderType === "particles") { uniformsRef.current.particleCount = gl.getUniformLocation(program, "u_particle_count") uniformsRef.current.particleSize = gl.getUniformLocation(program, "u_particle_size") uniformsRef.current.particleSpeed = gl.getUniformLocation(program, "u_particle_speed") uniformsRef.current.particleColor = gl.getUniformLocation(program, "u_particle_color") uniformsRef.current.glowIntensity = gl.getUniformLocation(program, "u_glow_intensity") uniformsRef.current.turbulence = gl.getUniformLocation(program, "u_turbulence") } else if (shaderType === "geometric") { uniformsRef.current.gridSize = gl.getUniformLocation(program, "u_grid_size") uniformsRef.current.lineWidth = gl.getUniformLocation(program, "u_line_width") uniformsRef.current.geometricRotationSpeed = gl.getUniformLocation(program, "u_rotation_speed") uniformsRef.current.colorShift = gl.getUniformLocation(program, "u_color_shift") uniformsRef.current.patternComplexity = gl.getUniformLocation(program, "u_pattern_complexity") uniformsRef.current.animationStyle = gl.getUniformLocation(program, "u_animation_style") } else if (shaderType === "noise") { uniformsRef.current.noiseScale = gl.getUniformLocation(program, "u_noise_scale") uniformsRef.current.noiseOctaves = gl.getUniformLocation(program, "u_noise_octaves") uniformsRef.current.noisePersistence = gl.getUniformLocation(program, "u_noise_persistence") uniformsRef.current.colorScale = gl.getUniformLocation(program, "u_color_scale") uniformsRef.current.colorOffset = gl.getUniformLocation(program, "u_color_offset") uniformsRef.current.distortionAmount = gl.getUniformLocation(program, "u_distortion_amount") } // Set up canvas size resizeCanvas() if (gl && program) { gl.useProgram(program) } } // Handle window resize useEffect(() => { const handleResize = () => { resizeCanvas() } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, []) // Handle mouse/touch movement useEffect(() => { const handlePointerMove = (e: MouseEvent | TouchEvent) => { const canvas = canvasRef.current if (!canvas) return let clientX, clientY if ("touches" in e) { clientX = e.touches[0].clientX clientY = e.touches[0].clientY } else { clientX = e.clientX clientY = e.clientY } const rect = canvas.getBoundingClientRect() const x = (clientX - rect.left) / rect.width const y = (clientY - rect.top) / rect.height setPointer((prev) => ({ ...prev, tX: x, tY: y, })) } const handleScroll = () => { const scrollTop = window.scrollY || document.documentElement.scrollTop const scrollHeight = document.documentElement.scrollHeight - window.innerHeight const progress = scrollTop / scrollHeight || 0 setScrollProgress(progress) } window.addEventListener("mousemove", handlePointerMove) window.addEventListener("touchmove", handlePointerMove as any) window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("mousemove", handlePointerMove) window.removeEventListener("touchmove", handlePointerMove as any) window.removeEventListener("scroll", handleScroll) } }, []) // Animation loop useEffect(() => { let frameCount = 0 const gl = glRef.current const program = programRef.current // Ensure gl and program are available before using the program if (gl && program) { gl.useProgram(program) } const animate = () => { const now = Date.now() const elapsed = now - startTimeRef.current frameCount++ // Update pointer with easing setPointer((prev) => ({ x: prev.x + (prev.tX - prev.x) * 0.05, y: prev.y + (prev.tY - prev.y) * 0.05, tX: prev.tX, tY: prev.tY, })) // If elapsed time gets too large, reset the start time while maintaining visual continuity if (elapsed > 900000) { // Reset after ~15 minutes startTimeRef.current = now - (elapsed % 900000) } render(elapsed) requestRef.current = requestAnimationFrame(animate) } requestRef.current = requestAnimationFrame(animate) return () => { if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } }, [pointer, scrollProgress, shaderType]) // Update the render function to include the new uniforms const render = (time: number) => { const gl = glRef.current const program = programRef.current const uniforms = uniformsRef.current if (!gl || !program || !uniforms.time) return // Wrap the time value to prevent precision issues const wrappedTime = time % 1000000 // Update common uniforms gl.uniform1f(uniforms.time, wrappedTime) gl.uniform1f(uniforms.ratio, gl.canvas.width / gl.canvas.height) gl.uniform2f(uniforms.pointerPosition, pointer.x, pointer.y) if (uniforms.scrollProgress) { gl.uniform1f(uniforms.scrollProgress, scrollProgress) } // Update shader-specific uniforms if (shaderType === "neuro") { const params = neuroParams gl.uniform1f(uniforms.baseHueSpeed!, params.baseHueSpeed) gl.uniform1f(uniforms.colorSaturation!, params.colorSaturation) gl.uniform1f(uniforms.colorLightness!, params.colorLightness) gl.uniform1f(uniforms.complementaryOffset!, params.complementaryOffset) gl.uniform1f(uniforms.pulseSpeed!, params.pulseSpeed) gl.uniform1f(uniforms.pulseIntensity!, params.pulseIntensity) gl.uniform1f(uniforms.shapeComplexity!, params.shapeComplexity) gl.uniform1f(uniforms.shapeIntensity!, params.shapeIntensity) gl.uniform1f(uniforms.rotationSpeed!, params.rotationSpeed) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "waves") { const params = wavesParams gl.uniform1f(uniforms.waveCount!, params.waveCount) gl.uniform1f(uniforms.waveAmplitude!, params.waveAmplitude) gl.uniform1f(uniforms.waveSpeed!, params.waveSpeed) gl.uniform3fv(uniforms.colorGradient1!, params.colorGradient1) gl.uniform3fv(uniforms.colorGradient2!, params.colorGradient2) gl.uniform1f(uniforms.distortion!, params.distortion) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "particles") { const params = particlesParams gl.uniform1f(uniforms.particleCount!, params.particleCount) gl.uniform1f(uniforms.particleSize!, params.particleSize) gl.uniform1f(uniforms.particleSpeed!, params.particleSpeed) gl.uniform3fv(uniforms.particleColor!, params.particleColor) gl.uniform1f(uniforms.glowIntensity!, params.glowIntensity) gl.uniform1f(uniforms.turbulence!, params.turbulence) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "geometric") { const params = geometricParams gl.uniform1f(uniforms.gridSize!, params.gridSize) gl.uniform1f(uniforms.lineWidth!, params.lineWidth) gl.uniform1f(uniforms.geometricRotationSpeed!, params.rotationSpeed) gl.uniform1f(uniforms.colorShift!, params.colorShift) gl.uniform1f(uniforms.patternComplexity!, params.patternComplexity) gl.uniform1f(uniforms.animationStyle!, params.animationStyle) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "noise") { const params = noiseParams gl.uniform1f(uniforms.noiseScale!, params.noiseScale) gl.uniform1f(uniforms.noiseOctaves!, params.noiseOctaves) gl.uniform1f(uniforms.noisePersistence!, params.noisePersistence) gl.uniform1f(uniforms.colorScale!, params.colorScale) gl.uniform1f(uniforms.colorOffset!, params.colorOffset) gl.uniform1f(uniforms.distortionAmount!, params.distortionAmount) gl.uniform1f(uniforms.timeScale!, params.timeScale) } // Draw gl.drawArrays(gl.TRIANGLES, 0, 6) } // Add a function to handle parameter changes const handleParamChange = (name: string, value: any) => { const currentParams = getCurrentParams() setCurrentParams({ ...currentParams, [name]: value, }) } // Add a function to copy the configuration const copyConfig = () => { const config = { type: shaderType, params: getCurrentParams(), } const configString = JSON.stringify(config, null, 2) navigator.clipboard .writeText(configString) .then(() => { setCopySuccess(true) setTimeout(() => setCopySuccess(false), 2000) }) .catch((err) => { console.error("Failed to copy: ", err) }) } // Add a function to reset parameters to default const resetParams = () => { setCurrentParams(defaultParams[shaderType]) } // Change shader type const changeShaderType = (type: ShaderType) => { setShaderType(type) } // Resize canvas function const resizeCanvas = () => { const canvas = canvasRef.current const gl = glRef.current if (!canvas || !gl) return const devicePixelRatio = Math.min(window.devicePixelRatio, 2) const displayWidth = Math.floor(canvas.clientWidth * devicePixelRatio) const displayHeight = Math.floor(canvas.clientHeight * devicePixelRatio) if (canvas.width !== displayWidth || canvas.height !== displayHeight) { canvas.width = displayWidth canvas.height = displayHeight gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) } } // Helper functions for creating shaders and programs const createShader = (gl: WebGLRenderingContext, source: string, type: number) => { const shader = gl.createShader(type) if (!shader) { throw new Error("Failed to create shader") } gl.shaderSource(shader, source) gl.compileShader(shader) const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS) if (!success) { console.error(gl.getShaderInfoLog(shader)) gl.deleteShader(shader) throw new Error("Failed to compile shader") } return shader } const createProgram = (gl: WebGLRenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) => { const program = gl.createProgram() if (!program) { throw new Error("Failed to create program") } gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) const success = gl.getProgramParameter(program, gl.LINK_STATUS) if (!success) { console.error(gl.getProgramInfoLog(program)) gl.deleteProgram(program) throw new Error("Failed to link program") } return program } // Render shader-specific controls const renderShaderControls = () => { switch (shaderType) { case "neuro": return renderNeuroControls() case "waves": return renderWavesControls() case "particles": return renderParticlesControls() case "geometric": return renderGeometricControls() case "noise": return renderNoiseControls() default: return renderNeuroControls() } } // Render neuro shader controls const renderNeuroControls = () => { const params = neuroParams return (

Colors

Hue Speed: {params.baseHueSpeed.toFixed(2)} handleParamChange("baseHueSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Saturation: {params.colorSaturation.toFixed(2)} handleParamChange("colorSaturation", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Lightness: {params.colorLightness.toFixed(2)} handleParamChange("colorLightness", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color Offset: {params.complementaryOffset.toFixed(2)} handleParamChange("complementaryOffset", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pulse Speed: {params.pulseSpeed.toFixed(2)} handleParamChange("pulseSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pulse Intensity: {params.pulseIntensity.toFixed(2)} handleParamChange("pulseIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Rotation Speed: {params.rotationSpeed.toFixed(2)} handleParamChange("rotationSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Shape

Complexity: {params.shapeComplexity.toFixed(0)} handleParamChange("shapeComplexity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Shape Intensity: {params.shapeIntensity.toFixed(2)} handleParamChange("shapeIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render waves shader controls const renderWavesControls = () => { const params = wavesParams return (

Wave Properties

Wave Count: {params.waveCount.toFixed(0)} handleParamChange("waveCount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Wave Amplitude: {params.waveAmplitude.toFixed(2)} handleParamChange("waveAmplitude", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Wave Speed: {params.waveSpeed.toFixed(2)} handleParamChange("waveSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Distortion: {params.distortion.toFixed(2)} handleParamChange("distortion", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Colors

Color 1 R { const newColor = [...params.colorGradient1] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 1 G { const newColor = [...params.colorGradient1] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 1 B { const newColor = [...params.colorGradient1] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 R { const newColor = [...params.colorGradient2] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 G { const newColor = [...params.colorGradient2] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 B { const newColor = [...params.colorGradient2] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render particles shader controls const renderParticlesControls = () => { const params = particlesParams return (

Particle Properties

Particle Count: {params.particleCount.toFixed(0)} handleParamChange("particleCount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Particle Size: {params.particleSize.toFixed(3)} handleParamChange("particleSize", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Particle Speed: {params.particleSpeed.toFixed(2)} handleParamChange("particleSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Glow Intensity: {params.glowIntensity.toFixed(2)} handleParamChange("glowIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Turbulence: {params.turbulence.toFixed(2)} handleParamChange("turbulence", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color

R { const newColor = [...params.particleColor] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

G { const newColor = [...params.particleColor] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

B { const newColor = [...params.particleColor] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render geometric shader controls const renderGeometricControls = () => { const params = geometricParams return (

Pattern

Grid Size: {params.gridSize.toFixed(1)} handleParamChange("gridSize", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Line Width: {params.lineWidth.toFixed(2)} handleParamChange("lineWidth", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pattern Complexity: {params.patternComplexity.toFixed(0)} handleParamChange("patternComplexity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation Style: {params.animationStyle.toFixed(0)} handleParamChange("animationStyle", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Color Shift: {params.colorShift.toFixed(2)} handleParamChange("colorShift", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render noise shader controls const renderNoiseControls = () => { const params = noiseParams return (

Noise Properties

Noise Scale: {params.noiseScale.toFixed(1)} handleParamChange("noiseScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Noise Octaves: {params.noiseOctaves.toFixed(0)} handleParamChange("noiseOctaves", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Noise Persistence: {params.noisePersistence.toFixed(2)} handleParamChange("noisePersistence", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Distortion Amount: {params.distortionAmount.toFixed(2)} handleParamChange("distortionAmount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color

Color Scale: {params.colorScale.toFixed(2)} handleParamChange("colorScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color Offset: {params.colorOffset.toFixed(2)} handleParamChange("colorOffset", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } return (

) }

Colors

Animation

Shape

Wave Properties

Colors

Animation

Particle Properties

Color

Animation

Pattern

Animation

Noise Properties

Color

Animation

Shader Controls

Shader Type

About

Tags

Share

About

Tags

Share

More from marcodenic

More Templates Like This